<template>
  <article class="page">
    <headerbar>我的关注</headerbar>
    <section class="frame-content-sub no-bg">
      <section class="self-height">
        <section class="people-list list-block mgt-2">
          <fetchData
            class="people-list"
            :loading="isLoading"
            :data="swipeData"
          ></fetchData>
          <cube-scroll
            ref="scroll"
            :options="options"
            @pulling-up="onPullingUp"
          >
            <cube-swipe>
              <transition-group name="swipe" tag="div">
                <div
                  class=""
                  v-for="(data, index) in swipeData"
                  :key="data.userId"
                >
                  <cube-swipe-item ref="swipeItem" :index="index">
                    <div class="people-item" @click="detail(data)">
                      <section class="people-info">
                        <div class="avatar-img">
                          <img
                            v-if="!data.pic || data.pic === ''"
                            src="../../../../static/images/default.jpg"
                            alt=""
                          />
                          <img
                            v-if="data.pic && data.pic !== ''"
                            :src="showImg(data.pic)"
                            alt=""
                          />
                        </div>
                        <span class="name">{{ data.channelName }}</span>
                      </section>
                      <span class="btn" @click.stop="deleteItem(data.deptId)"
                        >删除</span
                      >
                    </div>
                  </cube-swipe-item>
                </div>
              </transition-group>
            </cube-swipe>
            <!-- <div
              class="text-center no-data"
              v-if="!isLoading && swipeData.length === 0"
            >
              <img src="../../../../static/images/no_data.png" alt="" />
              <p>暂无数据</p>
            </div> -->
            <!-- W noData -->
            <noData v-if="!isLoading && swipeData.length === 0"></noData>
            <onBottom v-else-if="onBottom"></onBottom>
          </cube-scroll>
        </section>
      </section>
    </section>
  </article>
</template>


<script>
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import api from "@/common/config/api";
import moment from "moment";
export default {
  name: "mySubscriptions",
  data() {
    return {
      isLoading: true,
      pageNo: 1,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      swipeData: [],
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.isLoading = true;
      loginService.userDept().then((res) => {
        if (res.code === 0 && res.data.length < 1) {
          this.isLoading = false;
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return;
        }
        this.pageNo++;
        this.swipeData = this.swipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    showImg(fileId) {
      if (!fileId || fileId === "") {
        return "";
      }
      let fileUrl = this.tools.getImgUrl(fileId);
      console.log("-------------fileUrl=", fileUrl);
      return fileUrl;
    },
    deleteItem(deptId) {
      let me = this;
      this.$createDialog({
        type: "confirm",
        icon: "",
        title: "温馨提示",
        content: "确定取消当前订阅",
        confirmBtn: {
          text: "确定",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          me.submitDelete(deptId);
        },
        onCancel: () => {},
      }).show();
    },
    submitDelete(deptId) {
      let _this = this;
      loginService.userChannelDeptOne(deptId).then((res) => {
        if (res.code !== 0) {
          return tools.tip(res.message);
        } else {
          tools.tip("取消订阅成功");
          _this.pageNo = 1;
          _this.swipeData = [];
          _this.loadData();
        }
      });
    },
    detail(item) {
      this.$store.state.newsChanelData = item;
      this.$router.push({
        name: "newsChannel",
        query: { id: item.deptId, channelName: item.channelName },
      });
    },
  },
};
</script>

<style scoped>
</style>
